<template>
  <div class="app-container">
    <el-card style="margin-bottom: 20px">
      <el-form
        ref="saleOrderApproveQueryFormRef"
        :model="saleOrderApproveQueryForm"
        inline
      >
        <el-form-item label="合同编号" prop="contractNo">
          <el-input
            v-model="saleOrderApproveQueryForm.contractNo"
            placeholder="合同编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="申请编号" prop="requestNo">
          <el-input
            v-model="saleOrderApproveQueryForm.requestNo"
            placeholder="申请编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="供应商" prop="supplierId">
          <el-select
            v-model="saleOrderApproveQueryForm.supplierId"
            placeholder="供应商"
          >
            <el-option
              v-for="item in supplierList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="签约日期" prop="signAttr">
          <el-date-picker
            v-model="saleOrderApproveQueryForm.signAttr"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="申请人" prop="applyUser">
          <el-select
            v-model="saleOrderApproveQueryForm.applyUser"
            placeholder="申请人"
          >
            <el-option
              v-for="item in applyApproveUserList"
              :key="item.id"
              :label="item.realName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请日期" prop="applyAttr">
          <el-date-picker
            v-model="saleOrderApproveQueryForm.applyAttr"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="申请状态" prop="applyStatus">
          <el-select
            v-model="saleOrderApproveQueryForm.applyStatus"
            placeholder="申请状态"
          >
            <el-option label="未提交" value="未提交"></el-option>
            <el-option label="待审核" value="待审核"></el-option>
            <el-option label="已审核" value="已审核"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核人" prop="approveUser">
          <el-select
            v-model="saleOrderApproveQueryForm.approveUser"
            placeholder="审核人"
          >
            <el-option
              v-for="item in applyApproveUserList"
              :key="item.id"
              :label="item.realName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核日期" prop="approveAttr">
          <el-date-picker
            v-model="saleOrderApproveQueryForm.approveAttr"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="审核状态" prop="approveStatus">
          <el-select
            v-model="saleOrderApproveQueryForm.approveStatus"
            placeholder="审核状态"
          >
            <el-option label="通过" value="通过"></el-option>
            <el-option label="驳回" value="驳回"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getSaleOrderApproveList"
            >查询</el-button
          >
          <el-button @click="resetSaleOrderApproveQueryForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-table :data="saleOrderApproveList">
        <el-table-column
          v-for="item in saleOrderColumn"
          :key="item.prop"
          :label="item.label"
          :prop="item.prop"
        ></el-table-column>
        <el-table-column label="操作" v-slot="{ row }">
          <el-button
            :disabled="row.approveStatus == '通过'"
            type="primary"
            @click="popSaleOrderApproveDetailDialog(row)"
            >详情</el-button
          >
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="SaleOrderApproveLimitChange"
        @current-change="SaleOrderApprovePageChange"
        :current-page="saleOrderApprovePager.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="saleOrderApprovePager.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="saleOrderApprovePager.total"
      >
      </el-pagination>
    </el-card>
    <el-dialog
      :visible.sync="SaleOrderApproveDetailDialogVisible"
      center
      title="审核销售订单"
      :close-on-click-modal="false"
    >
      <el-form>
        <el-form-item label="审核意见">
          <el-input
            type="textarea"
            placeholder="审核意见"
            :rows="3"
            resize="none"
            v-model="editSaleOrderApprove.approveAdvice"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div>
          <el-button @click="closeSaleOrderApproveDetailDialog">取消</el-button>
          <el-button type="success" @click="passSaleOrderApprove"
            >通过</el-button
          >
          <el-button type="danger" @click="rejectSaleOrderApprove"
            >驳回</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getApplyApproveUserList, getCustomerList } from '@/api_zc/task/sale-order-approve'
import { getPurchaseContractList, PurchaseContractApprove, getSupplierList } from '@/api_zc/scm/purchase-management/purchase-contract'
export default {
  mounted () {
    this.getUnifyList()
    this.getSaleOrderApproveList()
  },
  data () {
    return {
      // 初始化主表
      saleOrderApproveList: [], //销售订单列表===销售订单审核列表
      saleOrderApprovePager: {
        page: 1,
        limit: 10,
        total: 0
      },
      saleOrderColumn: [
        {
          label: '编号',
          prop: 'id'
        },
        {
          label: '合同编号',
          prop: 'contractNo'
        },
        {
          label: '申请编号',
          prop: 'requestNo'
        },
        {
          label: '供应商',
          prop: 'supplier.name'
        },
        {
          label: '联系人',
          prop: 'contact'
        },
        {
          label: '金额',
          prop: 'contractAmount'
        },
        {
          label: '送货方式',
          prop: 'deliveryMethod'
        },
        {
          label: '签约日期',
          prop: 'signDate'
        },
        {
          label: '申请人',
          prop: 'applyUser.realName'
        },
        {
          label: '申请日期',
          prop: 'applyTime'
        },
        {
          label: '申请状态',
          prop: 'applyStatus'
        },
        {
          label: '审核人',
          prop: 'approveUser.realName'
        },
        {
          label: '审核日期',
          prop: 'approveTime'
        },
        {
          label: '审核状态',
          prop: 'approveStatus'
        },
      ],
      saleOrderApproveQueryForm: {
        contractNo: '',
        supplierId: '',
        signStartDate: '',
        signEndDate: '',
        signAttr: [],
        requestNo: '',
        applyUser: '',
        applyStartTime: '',
        applyEndTime: '',
        applyAttr: [],
        applyStatus: '',
        approveUser: '',
        approveStartTime: '',
        approveEndTime: '',
        approveAttr: [],
        approveStatus: ''
      },
      applyApproveUserList: [],
      customerList: [],

      SaleOrderApproveDetailDialogVisible: false,
      editSaleOrderApprove: {},
      supplierList: []
    }
  },
  methods: {
    // 初始化主表
    async getSaleOrderApproveList () {
      this.saleOrderApproveQueryForm.applyStartTime = this.saleOrderApproveQueryForm.applyAttr[0]
      this.saleOrderApproveQueryForm.applyEndTime = this.saleOrderApproveQueryForm.applyAttr[1]
      this.saleOrderApproveQueryForm.approveStartTime = this.saleOrderApproveQueryForm.approveAttr[0]
      this.saleOrderApproveQueryForm.approveEndTime = this.saleOrderApproveQueryForm.approveAttr[1]
      this.saleOrderApproveQueryForm.signStartDate = this.saleOrderApproveQueryForm.signAttr[0]
      this.saleOrderApproveQueryForm.signEndDate = this.saleOrderApproveQueryForm.signAttr[1]
      const { data: { content, total } } = await getPurchaseContractList({
        ...this.saleOrderApproveQueryForm,
        page: this.saleOrderApprovePager.page,
        limit: this.saleOrderApprovePager.limit
      })
      this.saleOrderApproveList = content
      this.saleOrderApprovePager.total = total
    },
    async getUnifyList () {
      const data1 = await getApplyApproveUserList()
      this.applyApproveUserList = data1.data
      const data2 = await getCustomerList()
      this.customerList = data2.data.content
      const data3 = await getSupplierList()
      this.supplierList = data3.data.content
    },
    SaleOrderApproveLimitChange (val) {
      this.saleOrderApprovePager.limit = val
      this.getSaleOrderApproveList()
    },
    SaleOrderApprovePageChange (val) {
      this.saleOrderApprovePager.page = val
      this.getSaleOrderApproveList()
    },

    // 主表增删改
    popSaleOrderApproveDetailDialog (row) {
      this.SaleOrderApproveDetailDialogVisible = true
      this.editSaleOrderApprove = row
    },
    closeSaleOrderApproveDetailDialog () {
      this.SaleOrderApproveDetailDialogVisible = false
      this.editSaleOrderApprove = {}
      this.getSaleOrderApproveList()
    },
    async passSaleOrderApprove () {
      this.SaleOrderApproveDetailDialogVisible = false
      this.editSaleOrderApprove.approveStatus = '通过'
      const { approveAdvice, approveStatus, id } = this.editSaleOrderApprove
      await PurchaseContractApprove({ approveAdvice, approveStatus, id })
      this.$message.success('审核通过')
      this.getSaleOrderApproveList()
    },
    async rejectSaleOrderApprove () {
      this.SaleOrderApproveDetailDialogVisible = false
      this.editSaleOrderApprove.approveStatus = '驳回'
      const { approveAdvice, approveStatus, id } = this.editSaleOrderApprove
      await PurchaseContractApprove({ approveAdvice, approveStatus, id })
      this.$message.success('审核驳回')
      this.getSaleOrderApproveList()
    },
    resetSaleOrderApproveQueryForm () {
      Object.assign(this.saleOrderApproveQueryForm, this.$options.data().saleOrderApproveQueryForm)
      this.getSaleOrderApproveList()
    }
  }
}
</script>

<style>
</style>